<template>
  <card-layout title="预警总览" class="chart" bg="2">
    <template #extra>
      <div>具体信息</div>
    </template>
    <div class="content" v-loading="loading" element-loading-background="rgba(255, 255, 255, 0.15)">
      <div class="radio-div">
        <el-radio-group v-model="warnType">
          <el-radio-button :label="1" >边坡监测预警</el-radio-button>
          <el-radio-button :label="2" >环境监测预警</el-radio-button>
          <el-radio-button :label="3" >工程监测提醒</el-radio-button>
        </el-radio-group>
      </div>
      <div class="warn-div">
        <div class="warn-child" v-for="(item,index) in warnList" :key="index">
          <div class="warn-bg" :class="item.level==1?'div-red':item.level==2?'div-orange':item.level==3?'div-yellow':'div-blue'">
            <span><el-icon class="warn-icon" size="16px" :class="item.level==1?'icon-red':item.level==2?'icon-orange':item.level==3?'icon-yellow':'icon-blue'"><WarnTriangleFilled /></el-icon></span>
            <span>{{ item.level==1?'I级':item.level==2?'II级':item.level==3?'III级':'IV级' }}</span>
            <span>{{ item.device }}</span>
            <span>{{ item.warnTime }}</span>
            <span><el-button type="primary" link>查看</el-button></span>
          </div>
        </div>
      </div>
    </div>
  </card-layout>
</template>

<script setup>
import { getCurrentInstance } from "vue";
const { proxy } = getCurrentInstance();
const warnType = ref(1)
const warnList = ref([
  {id:'1', level: 1, device:'gnss-01', warnTime: '2025-06-04 10:10:10' },
  {id:'2', level: 2, device:'gnss-01', warnTime: '2025-06-04 10:10:10' },
  {id:'3', level: 3, device:'gnss-01', warnTime: '2025-06-04 10:10:10' },
  {id:'4', level: 4, device:'gnss-01', warnTime: '2025-06-04 10:10:10' },
  {id:'5', level: 1, device:'gnss-01', warnTime: '2025-06-04 10:10:10' },
  {id:'6', level: 1, device:'gnss-01', warnTime: '2025-06-04 10:10:10' },
  {id:'4', level: 2, device:'gnss-01', warnTime: '2025-06-04 10:10:10' },
  {id:'5', level: 2, device:'gnss-01', warnTime: '2025-06-04 10:10:10' },
  {id:'6', level: 3, device:'gnss-01', warnTime: '2025-06-04 10:10:10' },
  {id:'4', level: 3, device:'gnss-01', warnTime: '2025-06-04 10:10:10' },
  {id:'5', level: 4, device:'gnss-01', warnTime: '2025-06-04 10:10:10' },
  {id:'6', level: 4, device:'gnss-01', warnTime: '2025-06-04 10:10:10' },
])
</script>

<style lang="scss" scoped>
.chart {
  box-sizing: border-box;
  flex: 1;
  .content {
    height: 100%;
    position: relative;
    .radio-div {
      text-align: center;
      margin-top: 10px;
    }
    .warn-div {
      position: absolute;
      top: 40px;
      left: 0px;
      width: 100%;
      height: calc(100% - 60px);
      padding-left: 10px;
      padding-right: 5px;
      box-sizing: border-box;
      overflow-y: auto;
      .warn-child {
        width: 100%;
        height: 34px;
        line-height: 34px;
        margin-top: 2px;
      }
      .warn-bg {
        color: #eef1fa;
        display: flex;
        white-space: nowrap;
        >span{
          flex:1;
          text-indent: 0px;
          overflow: hidden;
          text-overflow:ellipsis;
          white-space: nowrap;
        }
        >span:nth-child(1){
          max-width:40px;
          text-align: center;
          .warn-icon {
            font-size: 18px;
            top: 5px;
          }
        }
        >span:nth-child(2){
          max-width:50px;
          font-size: 12px;
          text-align: center;
        }
        >span:nth-child(3){
          max-width:100px;
          font-size: 12px;
          text-align: center;
        }
        >span:nth-child(4){
          max-width:120px;
          font-size: 12px;
          text-align: center;
        }
        >span:nth-child(5){
          max-width:70px;
          text-align: center;
        }
      }
      .div-red {
        background: linear-gradient(90deg, rgba(218, 240, 225, 0.15) 0%, rgba(255, 69, 0, 0.35) 99.75%);
      }
      .div-orange {
        background: linear-gradient(90deg, rgba(218, 240, 225, 0.15) 0%, rgba(255, 140, 0, 0.35) 99.75%);
      }
      .div-yellow {
        background: linear-gradient(90deg, rgba(218, 240, 225, 0.15) 0%, rgba(255, 215, 0, 0.35) 99.75%);
      }
      .div-blue {
        background: linear-gradient(90deg, rgba(218, 240, 225, 0.15) 0%, rgba(30, 144, 255, 0.35) 99.75%);
      }
      .icon-red {
        color: #f56c6c;
      }
      .icon-orange {
        color: #e6a23c;
      }
      .icon-yellow {
        color: yellow;
      }
      .icon-blue {
        color: #409eff;
      }
    }
  }
}
</style>
